<!--
 * @Description: 社区
 * @Author: rendc
 * @Date: 2023-12-03 09:33:13
 * @LastEditors: rendc
 * @LastEditTime: 2023-12-08 17:21:44
-->
<template>
  <!-- 顶部 -->
  <van-nav-bar @click-left="onClickLeft">
    <template #left>
        <!-- 返回上一页的按钮 -->
        <van-icon name="arrow-left" size="24" color="#656565"/>
        <!-- 当前定位、选择城市的跳转按钮 -->
        <span style="color: #222;font-size: 14px;font-weight: bold;" @click="toMyPage">全球</span>&nbsp;<van-icon name="arrow-down" size="16" color="#656565" @click="toMyPage"/>
    </template>
    <template #right>
      <!-- 搜索框 -->
      <van-search v-model="value" placeholder="请输入搜索关键词" />
      <!-- 头像 -->
      <van-image
        round
        width="23"
        height="23"
        src="https://pages.c-ctrip.com/you/lvpai-home-defaultavat.jpg"
      />
    </template>
  </van-nav-bar>
  <!-- 分类 -->
  <!-- Tab 标签页 -->
  <van-tabs v-model:active="active" color="#2fcfbb" title-active-color="#222222" title-inactive-color="#222222" >
    <van-tab v-for="item in tabData" :key="item.id" :title="item.title">
      <!-- 内容区 -->
      <div v-if="active == 0" class="body">
        <!-- 卡片：图片+定位+描述+ -->
        <div class="myCard" v-for="item in myCardData" :key="item.id">
          <!-- 图片 -->
          <van-image 
            width="163"
            height="290"
            :src="item.img" 
          />
          <!-- 位置 -->
          <van-tag round type="primary" color="#00000080" text-color="#ffffff">
            <van-icon name="location" />{{ item.address }}
          </van-tag>
          <!-- title -->
          <div class="title">
            <van-text-ellipsis rows="2" :content="item.title" />
          </div>
          <van-row>
            <van-col span="18">
              <!-- 发布者的头像和昵称  -->
              <van-row>
                <van-col span="5">
                  <!-- 头像 -->
                  <van-image
                    round
                    width="24"
                    height="24"
                    :src="item.userPhoto"
                  />
                </van-col>
                <van-col span="19">
                  <van-text-ellipsis class="userNameClass" :content="item.userName" />
                </van-col>
              </van-row>
            </van-col>
            <van-col span="6">
              <!-- 点赞和点赞数 -->
              <van-row>
                <van-col span="12">
                  <!-- 点赞 -->
                  <van-icon name="good-job-o" />
                </van-col>
                <van-col span="12">
                  <van-text-ellipsis class="numClass" :content="item.num" />
                </van-col>
              </van-row>
            </van-col>
          </van-row>
        </div>
        <!-- 发布送积分按钮 -->
      </div>
    </van-tab>
  </van-tabs>
</template>
<script setup>
import { ref } from 'vue';

// 默认选中的标签
const active = ref(0);

// 模拟tab的数据
const tabData = ref([
  {
    id:1,
    title:"发现",
  },
  {
    id:2,
    title:"徒步",
  },
  {
    id:3,
    title:"看海",
  },
  {
    id:4,
    title:"玩乐",
  },
  {
    id:5,
    title:"酒店",
  },
  {
    id:6,
    title:"美食",
  },
]);

// 模拟myCard的数据
const myCardData = ref([
  {
    id:1,
    img:"https://dimg04.c-ctrip.com/images/1me2512000cn9mqutBC9D_R_640_10000_Q90.jpg?proc=source/tripcommunity",
    address:"黄山风景区",
    title:"中国最美八个地方。去过四个算合格",
    userPhoto:"https://dimg04.c-ctrip.com/images/0Z81812000bly5tsbDC3D_C_180_180.jpg",
    userName:"世界景点推荐",
    num:"81",
  },
  {
    id:2,
    img:"https://dimg04.c-ctrip.com/images/1me2512000cn9mqutBC9D_R_640_10000_Q90.jpg?proc=source/tripcommunity",
    address:"黄山风景区",
    title:"中国最美八个地方。去过四个算合格",
    userPhoto:"https://dimg04.c-ctrip.com/images/0Z81812000bly5tsbDC3D_C_180_180.jpg",
    userName:"世界景点推荐",
    num:"81",
  },
  {
    id:3,
    img:"https://dimg04.c-ctrip.com/images/1me2512000cn9mqutBC9D_R_640_10000_Q90.jpg?proc=source/tripcommunity",
    address:"黄山风景区",
    title:"中国最美八个地方。去过四个算合格",
    userPhoto:"https://dimg04.c-ctrip.com/images/0Z81812000bly5tsbDC3D_C_180_180.jpg",
    userName:"世界景点推荐",
    num:"81",
  },
]);

const onClickLeft = () => {
  history.back();
};

const toMyPage = () => {
  // 跳转到我的页面
  // 通过改active的值来实现跳转
  // 通过浏览器存储 session local
  // vuex 状态管理机
  // vue - router
}
</script>
<style lang="less" scoped>
  :deep(.van-tab--active){
      font-size: 21px;
      font-weight:400;
  }
  .body{
    background-color: #F1F7FA;
    // border: 1px solid red;
    height: calc(100vh - 46px - 50px);
    overflow: auto;
  }
  .myCard{
    display: inline-block;
    width:calc(50% - 10px); // 占父元素宽度的一半
    // width:50vw; // 浏览器视口宽度的一半
    // border:1px solid red;
    border-radius: 0 0 4px 4px;
    background-color: #ffffff;
    margin-top: 10px;
    margin-left: 10px;
    .title{
      color: #222222;
      font-size: 14px;
      padding: 10px 8px 0 8px;
    }
    .userNameClass,.numClass{
      font-size: 12px;
    }
    .userNameClass{
      color:"#333333"
    }
    .numClass{
      color:"#222222"
    }
  }
</style>
